Radio

Component Overview

The Radio Button in Emvi UI is a fundamental selection control used to offer users a single choice from a set of mutually exclusive options. It's designed for use in forms, preference panels, modal dialogs, and configuration views—especially where decisions must be clear and final. Unlike checkboxes, radio buttons enforce one active option per group and communicate that behavior visually and semantically. In Emvi UI, the component is crafted with a focus on clarity, accessibility (WCAG-compliant), and seamless alignment within both Figma mockups and Tailwind-based codebases. The radio system supports visual customization through tokens and design primitives shared across the Design System.

Allowing Single Selections

A Radio is a UI element designed to allow users to select a single value from a predefined set of mutually exclusive options. This ensures that only one option can be chosen at a time, making it ideal for scenarios where a specific choice is required, such as selecting a payment method or answering a multiple-choice question.

Grouping Options

Radios are typically arranged in groups, with each button representing a different option. Grouping Radios helps organize related choices and provides a clear structure for users. When one Radio in the group is selected, any previously selected button is automatically deselected, maintaining the exclusivity of the choices.

Explaining Options

Each Radio usually includes a label that explains the option it stands for. This label provides context and clarity, helping users understand what each choice represents. Clear labeling is essential for an intuitive user experience, ensuring that users can make informed decisions quickly and easily. Our UI kit includes customizable Radio components that can be easily tailored to fit any design, providing a user-friendly way to present exclusive options.

Types and Variants

Standard: Single radio with label.
With Sublabel: Includes helper text for contextual clarity.
Stacked: Vertically aligned for long labels or mobile screens.
Inline Group: Horizontally aligned for fast scanning or compact spaces.
Disabled: Non-interactive state for locked or unavailable options.
Variants adapt visually to light/dark themes and support design tokens like radio.bg, radio.dot, and radio.label.

Sizes, Spacing, and Scale

Emvi UI supports three sizes for consistent UI density:
SM – compact layouts or dense tables
MD – default for forms, flows, and settings
LG – for onboarding, highlighted selections, or touch-first interfaces
Spacing between the radio and label is handled via Figma Auto Layout and Tailwind utilities (gap, align-center). Ensure hit areas follow accessibility standards (≥44x44px).

States and Behavior

Radio buttons behave as part of a grouped set defined by the name attribute in HTML. Only one can be selected at a time. States include:
Unchecked / Checked
Hover / Focus-visible
Disabled (non-selectable)
Error (used during validation)
UX-wise, radio buttons should be used when all available options are visible at once—avoid hiding or nesting options under toggles unless strongly justified.

Accessibility

To ensure inclusive design:
Use <label> for clickable areas
Keep name attribute consistent across grouped radios
Use aria-describedby for helper text
Ensure visible focus ring
Don't rely solely on color to convey state
Screen reader users will benefit from proper labeling and ARIA practices (aria-checked, role="radio", aria-labelledby).

Figma & Tailwind Integration

Figma:
Component includes states: default, checked, disabled, error
Supports dark/light mode via style tokens
Uses Auto Layout: smart alignment between radio and label/sublabel
Variants for stacked/inline layouts, with/without description
Tailwind:
Layout: inline-flex items-center gap-2
Dot styling: peer-checked:bg-primary-500, rounded-full border
Focus: focus-visible:ring-2 ring-offset-2
Responsive variants: sm:gap-1, lg:w-5
Tokens are shared with other input elements for consistency.

Best Implementation Practices

Use when only one option should be active in a group
Always pair with labels; avoid blank states
Don't use radios for toggle behavior — use switch or button
Avoid auto-selecting unless there's a logical default
Ensure proper spacing for readability and interaction
Integrate with Figma's variant system for design consistency